<template>
	<view class="z-box" :style="`padding-top:${BarNavHeight}px`">
		<u-navbar leftIconColor="#000" @leftClick="back" title="意见反馈" :title-style="NavCss"
			bgColor="#f8f8f8"></u-navbar>
		<view class="z-body" :style="`height:${NBodyHeight}px`">
			<view class="form-box">
				<view class="input-group">
					<text class="label">问题类型</text>
					<view class="type-selector">
						<view v-for="(type, index) in typeList" :key="index" class="type-item"
							:class="{ active: selectedType === index }" @click="selectedType = index">
							{{ type }}
						</view>
					</view>
				</view>
				<view class="input-group">
					<text class="label">问题描述</text>
					<view class="input-wrapper" :class="{ focus: isFocus }">
						<textarea class="input-content" placeholder="请输入具体内容..." placeholder-class="placeholder"
							maxlength="200" v-model="content" @focus="isFocus = true" @blur="isFocus = false" />
						<text class="counter">{{ content.length }}/200</text>
					</view>
				</view>
				<view class="submit-btn" @click="handleSubmit">
					<text class="btn-text">提交反馈</text>
				</view>
			</view>
		</view>
		<u-notify ref="notify"></u-notify>
	</view>
</template>

<script>
	import LayoutMix from '@/mixins/layout-mix.js'
	import NotifyMix from '@/mixins/notify-fix.js'
	import API from '@/api/index.js'
	import Util from '@/utils'
	export default {
		mixins: [LayoutMix, NotifyMix],
		data() {
			return {
				typeList: ['功能异常', '体验问题', '内容建议', '其他反馈'],
				selectedType: 0,
				content: '',
				isFocus: false
			}
		},
		methods: {
			back() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			async handleSubmit() {
				if (Util.StringUtil.isEmpty(this.content)) {
					this.notifyFail('请输入反馈意见')
					return
				}
				uni.showLoading()
				const res = await API.CjFeedbackApi.feedback({
					questionType: `${this.selectedType + 1}`,
					question: this.content
				})
				uni.hideLoading()
				this.notifyOk('已收到您的反馈，感谢您的宝贵意见')
			}
		},
		mounted() {
			this.selectedType = 0
			this.content = ''
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		background: #fff;
		border-radius: 24rpx;
		padding: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.02);
	}

	.input-group {
		margin-bottom: 48rpx;

		.label {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 32rpx;
			display: block;
			font-weight: 500;
		}
	}

	.type-selector {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;

		.type-item {
			padding: 24rpx;
			text-align: center;
			border-radius: 12rpx;
			background: #f5f6f8;
			color: #666;
			font-size: 28rpx;
			transition: all 0.2s;

			&.active {
				background: linear-gradient(135deg, #4a90e2, #6c5ce7);
				color: #fff;
				font-weight: 500;
				box-shadow: 0 4rpx 16rpx rgba(106, 90, 205, 0.2);
			}
		}
	}

	.input-wrapper {
		border-radius: 16rpx;
		background: #f5f6f8;
		padding: 32rpx;
		border: 2rpx solid transparent;
		transition: all 0.3s;

		&.focus {
			border-color: #6c5ce7;
			background: #fff;
			box-shadow: 0 4rpx 16rpx rgba(106, 90, 205, 0.1);
		}

		.input-content {
			width: 100%;
			min-height: 200rpx;
			font-size: 28rpx;
			color: #333;
			line-height: 1.6;
		}

		.counter {
			display: block;
			text-align: right;
			font-size: 24rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}

	.placeholder {
		color: #bbb;
	}

	.submit-btn {
		margin-top: 60rpx;
		background: linear-gradient(135deg, #4a90e2, #6c5ce7);
		border-radius: 16rpx;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(106, 90, 205, 0.3);
		transition: opacity 0.2s;

		&:active {
			opacity: 0.9;
		}

		.btn-text {
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
</style>